<template>
  <view class="content">
    <!-- 轮播图 -->
    <swiper class="swiper-container" indicator-dots="true" autoplay="true" interval="3000" duration="800">
      <swiper-item v-for="(item, index) in swiperList" :key="index" class="swiper-item">
        <image :src="item.imageUrl" class="swiper-image" />
      </swiper-item>
    </swiper>
  </view>

  <!-- 盒子 -->
  <view class="box-container">
    <navigator class="box" url="/pages/my/component/photo/index">
      <image src="/static/images/nan.jpg" class="box-image" />
    </navigator>
    <text class="box-text">照片</text>

    <navigator class="box" url="/pages/my/component/Video/index">
      <image src="/static/images/hua1.jpg" class="box-image" />
    </navigator>
    <text class="box-text">视频</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [      
        { imageUrl: '/static/images/jt.jpg' },
        { imageUrl: '/static/images/nan.jpg' },
        { imageUrl: '/static/images/hua1.jpg' }
      ]
    }
  }
}
</script>

<style scoped>
/* 内容区背景渐变 */
/* .content {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));
} */

/* 轮播图容器 */
.swiper-container {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
}

/* 轮播图图片 */
.swiper-image {
  width: 96%;
  height: 98%;
  object-fit: cover;
  transition: transform 0.5s ease-in-out, box-shadow 0.3s ease-in-out;
  /* 添加阴影 */
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.644);
  /* 圆角 */
  border-radius: 10px;
}
.swiper-item{
  width: 100%;
  display: flex;
  justify-content: center;
}


/* 盒子容器 */
.box-container {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 20px; /* 控制盒子间距 */
}

/* 盒子样式 */
.box {
  width: 40%;
  height: 200px;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.644);
}

/* 盒子图片样式 */
.box-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
}

/* 盒子文字样式 */
.box-text {
  font-size: 16px;
  color: #333;
  text-align: center;
  width: 100%;
  /* margin-top: 5px; */
  font-weight: bold;
}

/* 响应式设计：小屏幕时盒子宽度调整 */
@media (max-width: 768px) {
  .box {
    width: 45%;
  }
}

@media (max-width: 480px) {
  .box {
    width: 90%;
  }
}
</style>
